/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("./spectrum-slider.css");
@import url("./slider-overrides.css");

/*
 * The :host will receive focus when interacting with the slider via the mouse.
 * Removes blue outline from :host when it is being focused.
*/
:host(:focus) {
    outline: 0;
}

:host([editable]) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label number"
        "slider number";
}

:host([editable]) #label-container {
    grid-area: label;
}

:host([editable]) #label-container + div {
    grid-area: slider;
}

:host([editable]) sp-number-field {
    grid-area: number;
    align-self: flex-end;
    margin-inline-start: calc(var(--swc-scale-factor) * 16px);
}

:host([editable]) output {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

:host([disabled]) {
    pointer-events: none;
}

:host([dragging]),
#track {
    touch-action: none;
    user-select: none;
}

.not-exact.ticks {
    justify-content: start;
}

:host([dir="ltr"]) .not-exact .tick {
    padding-right: var(--sp-slider-tick-offset);
}

:host([dir="rtl"]) .not-exact .tick {
    padding-left: var(--sp-slider-tick-offset);
}

:host([dir="ltr"]) .not-exact .tick:after {
    left: auto;
    transform: translate(-50%, 0);
}

:host([dir="rtl"]) .not-exact .tick:after {
    right: auto;
    transform: translate(50%, 0);
}

:host([dir="rtl"]) .handle:before {
    transform: translate(50%, -50%);
}

/*
 * The following three declarationsa required while https://github.com/adobe/spectrum-css/issues/521
 * waits to be addressed at the Spectrum CSS level.
 */

.track:before {
    background-size: var(--spectrum-slider-track-background-size) !important;
}

:host([dir="ltr"]) .track:last-of-type:before {
    background-position: 100%;
}

:host([dir="rtl"]) .track:first-of-type:before {
    background-position: 100%;
}

:host([dir="ltr"]) .track:not(:first-of-type, :last-of-type) {
    left: var(--spectrum-slider-track-segment-position);
}

:host([dir="rtl"]) .track:not(:first-of-type, :last-of-type) {
    right: var(--spectrum-slider-track-segment-position);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

:host([label-visibility="value"][dir="ltr"]) #value {
    margin-left: auto;
}

:host([label-visibility="value"][dir="rtl"]) #value {
    margin-right: auto;
}

:host([label-visibility="none"]) #label-container {
    padding: 0;
    margin: 0;
}

:host([label-visibility="none"]) #track {
    align-self: flex-end;
}

.fill {
    z-index: 2;
}

#slider-description {
    display: none;
}

:host([label-visibility="none"]) #label-container + #track {
    margin-block-start: 0;
}
